<template>
<el-table :data="tableData.filter(data => !search || data.bookname.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">

    <el-table-column
      label="id"
      prop="id">
    </el-table-column>


    <el-table-column
      label="书名"
      prop="bookname">
    </el-table-column>


    <el-table-column
      label="作者"
      prop="zuozhe">
    </el-table-column>


    <el-table-column align="right">

      <template slot="header" slot-scope="scope"> 
        <el-input v-model="search" size="mini" placeholder="输入书名搜索"/>
      </template>

      <template slot-scope="scope">
        
        <el-button size="mini" type="danger" @click="deletebook(scope.row.id, scope.$index, tableData )">删除</el-button>

      </template>

    </el-table-column>
  </el-table>
  </el-table>
</template>
<script>
import {
  getAllbook,
  deletebook,
} from '../services/book'

export default {
    data() {
      return {
        tableData: [],
        search: '',
        bookForm:{
          bookname:'',
          zuozhe:''
        }
      }
    },
    methods: {
    deletebook(id,index,rows){
        this.loadign=true;
        deletebook({id:id}).then(res=>{
            if(res.success){
                this.$message.info(res.err.msg);
                rows.splice(index,1);
                // this.loading=false;
            }else{
                this.$message.error(res.err.msg);
            }
        })
    }
},
    mounted:function(){
        console.log("获取书籍列表")
        getAllbook().then(res=>{
            console.log(res)
            this.tableData = res.data.books;
            console.log(res.data.book)
            // this.loading = false;
        })
    }
}
</script>